<template>
	<!--短租首页-->
	<yd-flexbox class="list4 list4rent" direction="vertical">

		<!--banner-->
		<div class="banner">
			<yd-slider :loop="false">
				<yd-slider-item v-for="item,key in carouseldata" :key="key">
					<a @click="GOlonghouseMaster(item.houseMasterId)">
						<img v-if="item.imgUrl.indexOf('?')==-1" :src="item.imgUrl+'?imageslim'">
						<img v-else :src="item.imgUrl">
					</a>
				</yd-slider-item>
			</yd-slider>
		</div>
		<!--分类-->
		<div v-if="houseTypedata" class="classification">
			<ul>
				<li v-for="item, key in houseTypedata" :key="key" @click="list_router(item.title)">
					<img class="icon-img" v-if="item.imgUrl.indexOf('?')==-1" :src="item.imgUrl+'?imageslim'" />
					<img class="icon-img" v-else :src="item.imgUrl" />
					<span>{{item.title}}</span>
				</li>
			</ul>
		</div>
		<!--房屋列表-->
		<div class="houselist">
			<yd-flexbox class="housenav">
				<yd-flexbox-item class="housenavitem" @click.native="accordion(source,cityId,version,1)"><span class="hntext" id="blocks">位置区域</span>
					<img v-if="accordionDH" src="../assets/img/icon_drop_down.png" />
					<img v-if="!accordionDH" src="../assets/img/icon_drop_top.png" />
				</yd-flexbox-item>
				<yd-flexbox-item class="housenavitem" @click.native="accordion(source,cityId,version,3)">更多筛选

					<img v-if="moreDH" src="../assets/img/icon_drop_down.png" />
					<img v-if="!moreDH" src="../assets/img/icon_drop_top.png" />
				</yd-flexbox-item>
				<yd-flexbox-item class="housenavitem" @click.native="accordion(source,cityId,version,4)"><span class="hntext" id="Recommen">推荐排序</span>

					<img v-if="RecommendDH" src="../assets/img/icon_drop_down.png" />
					<img v-if="!RecommendDH" src="../assets/img/icon_drop_top.png" />
				</yd-flexbox-item>
				<div ref="accordionF" class="housenav-accordion">
					<div class="accordionDH-box" v-if="!accordionDH">
						<div class="myaddress" v-show="!accordionDH" @click="getlat()">我的附近</div>
						<yd-accordion class="addressAcc" accordion v-show="!accordionDH">
							<yd-accordion-item v-for="blocksitem,key in blocksData" :key="key" :title="blocksitem.name">
								<yd-flexbox direction="vertical">
									<yd-flexbox-item v-for="itemresult,key in blocksitem.result" :key="key" @click.native="blocksLLat(itemresult.areaId,itemresult.lat,itemresult.lng,itemresult.name,1)">{{itemresult.name}}</yd-flexbox-item>
								</yd-flexbox>
							</yd-accordion-item>
						</yd-accordion>
					</div>
					<!--入住时间-->
					<div v-if="!tiemDH">

					</div>
					<!--更多筛选-->
					<div class="moreDH" v-show="!moreDH">
						<!--价格-->
						<div class="more-box price">
							<div class="moreDH-title">价格</div>
							<div class="block">
								<el-slider class="my-el-slider" v-model="value9" range :max="maxnum" :show-tooltip="false" :change="changeFUN()">
								</el-slider>
								<div style="display: -webkit-flex;display: flex;justify-content: space-between;"><span class="pricemin">￥0</span><span class="pricemax">不限</span></div>
							</div>
						</div>
						<!--出租类型-->
						<div class="more-box housetype">
							<div class="moreDH-title">出租类型</div>
							<div class="list-box mygriditem">
								<div class="list-item housetype-item">

									<span class="minsu " @click="housetypeitem(0)"></span>
									<span class="leasetype_span">整租</span>
								</div>
								<div class="list-item">

									<span class="danjian " @click="housetypeitem(1)"></span>
									<span class="leasetype_span">合租</span>
								</div>
							</div>

						</div>

						<!--户型-->
						<div class="more-box layout">
							<div class="moreDH-title">户型</div>
							<div class="tags">
								<span @click="layoutitem(0)" class="layout-item">一居</span>
								<span @click="layoutitem(1)" class="layout-item">二居</span>
								<span @click="layoutitem(2)" class="layout-item">三居</span>
								<span @click="layoutitem(3)" class="layout-item">四居</span>
								<span @click="layoutitem(4)" class="layout-item">不限</span>
							</div>
						</div>

						<!--特色标签-->
						<div class="more-box tags">
							<div class="moreDH-title">特色标签</div>
							<div class="tags">
								<span v-for="tagsitems,key in tagsData" :key="key" @click="tagsitem(key)" class="layout-item tagsitem">{{tagsitems.content}}</span>
							</div>
						</div>
						<!--设施-->
						<div class="more-box tags">
							<div class="moreDH-title">设施</div>
							<div class="listtags5-box">
								<div class="listtags5-item hsc-list" v-for="Amenityitem,key in AmenityData" :key="key" @click="Amenityitemclick(key)">

									<img class="hscl-icon" v-if="Amenityitem.grayIcon.indexOf('?')==-1" :src="Amenityitem.grayIcon+'?imageslim'" />
									<img class="hscl-icon" v-else :src="Amenityitem.grayIcon" />
									<p style="margin-top: .1rem;">{{Amenityitem.amenityName}}</p>
								</div>
							</div>
						</div>

						<!--底部按钮-->
						<div class="moreDH-bottom">
							<span class="mb-btn mb-btn1" @click="morecolse()">取消</span>
							<span class="mb-btn mb-btn2" @click="moreok()">确认</span>
						</div>

					</div>
					<!--推荐排序-->
					<div v-if="!RecommendDH">
						<div @click="RecommendDHitemclick(0)" class="RecommendDH-item"><span>推荐排序</span>
							<yd-icon name="checkoff" style="display: none;"></yd-icon>
						</div>
						<div @click="RecommendDHitemclick(1)" class="RecommendDH-item"><span>租金从高到低</span>
							<yd-icon name="checkoff" style="display: none;"></yd-icon>
						</div>
						<div @click="RecommendDHitemclick(2)" class="RecommendDH-item"><span>租金从低到高</span>
							<yd-icon name="checkoff" style="display: none;"></yd-icon>
						</div>
					</div>
				</div>
			</yd-flexbox>
			<!--房屋内容-->
			<div class="house">
				<long-view :data="getlongHouseListdata" @getlongHouseList="getlongHouseList" ref="child"></long-view>
			</div>
		</div>

	</yd-flexbox>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import Swiper from "../assets/libs/swiper.min.js";
	import LongView from "./LongView";
	export default {
		name: 'longrent',
		data() {
			var that = this;
			return {
				//				接收首页分类传参
				router_houseType: that.$route.query.router_houseType,
				//				长租分类
				//				二级首页banner
				page: 1,
				pageSize: [],
				getlongHouseListdata: [],
				mykey: that.$route.params.mykey,
				cityId: sessionStorage.getItem("cityId"),
				area_id: that.$route.params.area_id,
				lat: that.$route.params.lat,
				lng: that.$route.params.lng,
				house_type: that.$route.params.house_type,
				room: that.$route.params.room,
				houseMasterId: that.$route.params.houseMasterId,
				price_bottom: that.$route.params.price_bottom,
				price_top: that.$route.params.price_top,
				tags: that.$route.params.tags,
				equipment: that.$route.params.equipment,
				price_order: that.$route.params.price_order,
				accordionDH: true,
				tiemDH: true,
				moreDH: true,
				RecommendDH: true,
				//				地理筛选
				blocksData: [],
				//				标签筛选
				tagsData: [],
				//				设施筛选
				AmenityData: [],
				//				更多推荐
				value9: [0, 3000],
				maxnum: 3000,
				pands: 0,
				leiType: true,
				isFirstEnter: false // 是否第一次进入，默认false
			}
		},
		beforeRouteEnter(to, from, next) {
			// 路由导航钩子，此时还不能获取组件实例 `this`，所以无法在data中定义变量（利用vm除外）
			// 参考 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
			// 所以，利用路由元信息中的meta字段设置变量，方便在各个位置获取。这就是为什么在meta中定义isBack
			// 参考 https://router.vuejs.org/zh-cn/advanced/meta.html
			if(from.name == 'longList' || from.name == 'longDetails') {
				to.meta.isBack = true;
				//判断是从哪个路由过来的，
				//如果是page2过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可
			}
			next();
		},
		activated() {
			var that = this;
			if(!that.$route.meta.isBack || that.isFirstEnter) {

				document.querySelector("#blocks").innerText = "位置区域";
				$("#Recommen").html("推荐排序");
				// 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
				// 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据

				//				接收首页分类传参
				that.router_houseType = that.$route.query.router_houseType;
				
				//				长租分类
				//				二级首页banner
				that.page = 1;
				that.pageSize = [];
				that.getlongHouseListdata = [];
				that.mykey = that.$route.query.mykey;
				that.cityId = sessionStorage.getItem("cityId");
				that.area_id = that.$route.query.area_id;
				that.lat = that.$route.query.lat;
				that.lng = that.$route.query.lng;
				that.house_type = that.$route.query.house_type;
				that.room = that.$route.query.room;
				that.houseMasterId = that.$route.query.houseMasterId;
				that.price_bottom = that.$route.query.price_bottom;
				that.price_top = that.$route.query.price_top;
				that.tags = that.$route.query.tags;
				that.equipment = that.$route.query.equipment;
				that.price_order = that.$route.query.price_order;
				that.accordionDH = true,
				that.tiemDH = true,
				that.moreDH = true,
				that.RecommendDH = true,
				//				地理筛选
				that.blocksData = [],
				//				标签筛选
				that.tagsData = [],
				//				设施筛选
				that.AmenityData = [],
				//				更多推荐
				that.value9 = [0, 3000],
				that.maxnum = 3000,
				that.pands = 0,
				that.leiType = true,
				that.isFirstEnter = false // 是否第一次进入，默认false
				that.$refs.accordionF.style.animation = "0.1s ease both accordionD";

				that.houseType(that.router_houseType);
				that.getlongHouseList(that.page);
			} else {
				that.accordionDH = true;
				that.tiemDH = true;
				that.moreDH = true;
				that.RecommendDH = true;
				that.$refs.accordionF.style.animation = "0.1s ease both accordionD";
			}
			// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
			that.$route.meta.isBack = false
			// 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
			that.isFirstEnter = false;
		},
		created() {
			var that = this;
			that.isFirstEnter = true;
			// 只有第一次进入或者刷新页面后才会执行此钩子函数
			// 使用keep-alive后（2+次）进入不会再执行此钩子函数
		},
		computed: {
			...mapGetters([
				'source',
				'version',
				'houseTypedata',
				'carouseldata',
			])
		},
		methods: {
			...mapActions({
				getBlocksData: 'getBlocksData',
				getColumnData: 'getColumnData'
			}),

			setval() {
				var that = this;
				that.mykey = ""; // string 否 关键字
				//				that.area_id = ""; // string 否 区域id
				//				that.lat = ""; // string 否 进行经纬度搜索时传入
				//				that.lng = ""; // string 否 进行经纬度搜索时传入
				that.house_type = ""; // string 否 1 整租 2 合租
				that.room = ""; // string 否 户型
				that.houseMasterId = ""; // string 否 公寓搜索
				that.price_bottom = ""; // string 否 低价
				that.price_top = ""; // string 否 顶价
				that.tags = ""; // string 否 标签id串
				that.equipment = ""; // string 否 设备id串
				that.price_order = ""; // string 否 1 高 2 低
			},
			getlongHouseList(page) {

				var that = this;
				var ajaxSign = {
					"key": that.mykey, // string 否 关键字
					"cityId": that.cityId, // string 是
					"page": page.toString(), // string 否 分页
					"area_id": that.area_id, // string 否 区域id
					"lat": that.lat, // string 否 进行经纬度搜索时传入
					"lng": that.lng, // string 否 进行经纬度搜索时传入
					"house_type": that.house_type, // string 否 1 整租 2 合租
					"room": that.room, // string 否 户型
					"houseMasterId": that.houseMasterId, // string 否 公寓搜索
					"price_bottom": that.price_bottom, // string 否 低价
					"price_top": that.price_top, // string 否 顶价
					"tags": that.tags, // string 否 标签id串
					"equipment": that.equipment, // string 否 设备id串
					"price_order": that.price_order, // string 否 1 高 2 低
					"source": that.source // string 是
				};
				if (ajaxSign.house_type!=undefined||ajaxSign.room!=undefined) {
					ajaxSign.house_type=ajaxSign.house_type.toString();
					ajaxSign.room=ajaxSign.room.toString();
				}
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetLongList(ajaxData)
					.then(res => {
						let ajaxdata = res.result;
						that.pageSize = ajaxdata.length;

						that.getlongHouseListdata = that.getlongHouseListdata.concat(ajaxdata);
						if((that.pageSize % 8) != 0 || that.pageSize == 0) {
							this.$refs.child.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
							return;
						} else {
							this.$refs.child.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');

						}
					})

			},
			//			排序筛选
			RecommendDHitemclick(i) {
				var that = this;
				that.page = 1;
				$(".RecommendDH-item").eq(i).addClass("RecommendDH-item-active").siblings().removeClass("RecommendDH-item-active");
				$(".RecommendDH-item").eq(i).find(".yd-icon-checkoff").show().parents(".RecommendDH-item").siblings().find(".yd-icon-checkoff").hide();
				that.price_order = $(".RecommendDH-item-active").index().toString();
				if(that.RecommendDH == false) {
					that.RecommendDH = true;
					that.$refs.accordionF.style.animation = ".1s ease both accordionD";
					document.body.style.overflow = "visible";
					document.querySelector("html").style.overflow = "visible";
				}
				$("#Recommen").html($(".RecommendDH-item").eq(i).find("span").text());
				that.getlongHouseListdata = [];
				that.getlongHouseList(that.page);
			},
			//			价格改变
			changeFUN() {
				var that = this;
				if(that.value9[1] == 3000) {
					$(".pricemax").html("不限");
				} else {
					$(".pricemax").html("￥" + that.value9[1]);
				}
				$(".pricemin").html("￥" + that.value9[0]);
			},
			//			出租类型选择
			housetypeitem(type) {
				if(type == 0) {
					$(".minsu").addClass("minsuactive typeactive");
					$(".danjian").removeClass("danjianactive  typeactive");
					$(".chuangwei").removeClass("chuangweiactive  typeactive");
				}
				if(type == 1) {
					$(".minsu").removeClass("minsuactive  typeactive");
					$(".danjian").addClass("danjianactive  typeactive");
					$(".chuangwei").removeClass("chuangweiactive  typeactive");
				}
			},
			//			户型选择
			layoutitem(i) {
				$(".layout-item").eq(i).addClass("more-item-active").siblings().removeClass("more-item-active");
			},
			//			特色标签
			tagsitem(i) {
				if($(".tagsitem").eq(i).hasClass("layout-item-active")) {
					$(".tagsitem").eq(i).removeClass("layout-item-active")
				} else {
					$(".tagsitem").eq(i).addClass("layout-item-active")
				}

			},
			//			设施筛选
			Amenityitemclick(i) {
				if($(".hsc-list").eq(i).find("p").hasClass("hscl-icon-active")) {
					$(".hsc-list").eq(i).find("p").removeClass("hscl-icon-active")
					$(".hsc-list").eq(i).find(".hscl-icon").attr("src", that.AmenityData[i].grayIcon);
					$(".hsc-list").eq(i).find(".amenityID").remove();
				} else {
					$(".hsc-list").eq(i).find("p").addClass("hscl-icon-active")
					$(".hsc-list").eq(i).find(".hscl-icon").attr("src", that.AmenityData[i].redIcon);
					$(".hsc-list").eq(i).find("div").append("<span class='amenityID'>" + that.AmenityData[i].amenityId + "</span>")
				}
			},
			//			更多筛选关闭按钮
			morecolse() {
				var that = this;
				that.moreDH = true;
				that.$refs.accordionF.style.animation = ".1s ease both accordionD";
				document.body.style.overflow = "visible";
				document.querySelector("html").style.overflow = "visible";
			},
			//			更多筛选确定筛选
			moreok() {
				var that = this;
				that.setval();
				that.page = 1; //  string 否
				if($(".minsu").hasClass("minsuactive")) {
					that.house_type = 1; // string 否 1 整租 2 合租
				}
				if($(".danjian").hasClass("danjianactive")) {
					that.house_type = 2; // string 否 1 整租 2 合租
				}
				if($(".more-item-active").text() == "不限") {
					that.room = "";
				} else {
					that.room = $(".more-item-active").index() + 1; //  string 否 几室
				}
				that.price_bottom = that.value9[0].toString(); //  string 否 低价
				that.price_top = that.value9[1].toString(); //  string 否 顶价
				let amenityIdList_active = "";
				for(var i = 0; i < $(".amenityID").length; i++) {
					if(i == $(".amenityID").length - 1) {
						amenityIdList_active += $(".amenityID").eq(i).text();
					} else {
						amenityIdList_active += $(".amenityID").eq(i).text() + ",";
					}
				}
				that.equipment = amenityIdList_active; //  string 否
				let app_tag_active = "";
				for(var i = 0; i < $(".layout-item-active").length; i++) {
					if(i == $(".layout-item-active").length - 1) {
						app_tag_active += $(".layout-item-active").eq(i).text();
					} else {

						app_tag_active += $(".layout-item-active").eq(i).text() + ",";
					}
				}
				that.tags = app_tag_active; //  string 是 标签搜索， id用 ','隔开
				//				that.moreDH = true;
				//				that.$refs.accordionF.style.animation = ".1s ease both accordionD";
				if(that.moreDH == false) {
					that.moreDH = true;
					that.$refs.accordionF.style.animation = ".1s ease both accordionD";
					document.body.style.overflow = "visible";
					document.querySelector("html").style.overflow = "visible";
				}
				that.getlongHouseListdata = [];
				that.getlongHouseList(that.page);
			},
			getlat() {
				var that = this;

				var map, geolocation;
				AMap.service(['AMap.Geolocation'], function() {
					geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：无穷大
						buttonPosition: 'RB'
					});
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', that.onComplete); //返回定位信息
					AMap.event.addListener(geolocation, 'error', that.onError); //返回定位出错信息
				})

			},
			onComplete(data) {
				var that = this;
				var str = ['定位成功'];
				that.lng = data.position.getLng();
				that.lat = data.position.getLat();

				if(data.accuracy) {
					str.push('精度：' + data.accuracy + ' 米');
				} //如为IP精确定位结果则没有精度信息
				str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
				let name = "我的附近";
				let areaId = "";
				let page = 1;
				that.getlongHouseListdata = [];
				that.blocksLLat(areaId.toString(), that.lat.toString(), that.lng.toString(), name, page);
				that.accordionDH = true;
				that.$refs.accordionF.style.animation = ".1s ease both accordionD";
				document.body.style.overflow = "visible";
				document.querySelector("html").style.overflow = "visible";
			},
			onError(data) {
				var that = this;
				that.accordionDH = true;
				that.$refs.accordionF.style.animation = ".1s ease both accordionD";
				document.body.style.overflow = "visible";
				document.querySelector("html").style.overflow = "visible";
				that.$dialog.toast({
					mes: "暂时无法获取您的位置",
					timeout: 1000
				});
			},
			blocksLLat(areaId, lat, lng, name, page) {
				var that = this;
				that.setval();
				that.areaId = areaId;
				that.lat = lat;
				that.lng = lng;
				that.page = page;
				if(that.accordionDH == false) {
					that.accordionDH = true;
					that.$refs.accordionF.style.animation = ".1s ease both accordionD";
					document.body.style.overflow = "visible";
					document.querySelector("html").style.overflow = "visible";
				}
				document.querySelector("#blocks").innerText = name;
				$("#Recommen").html("推荐排序");
				that.getlongHouseListdata = [];
				that.getlongHouseList(that.page);
			},
			accordion(source, cityId, version, item) {
				var that = this;
				if(document.querySelector("#topopen").style.display == "none") {
					$(".list4rent .housenav-accordion").css("top", ".85rem");
				}
				if(item == 1) {
					if(that.accordionDH == true) {
						var ajaxSign = {
							"source": that.source, // string 是
							"cityId": cityId, //  string 是
							"version": that.version
						};
						let ajaxData = api.getAES(ajaxSign);
						//				数据调用
						api.GetBlocks(ajaxData)
							.then(res => {
								let ajaxdata = res.result;
								that.blocksData = ajaxdata;
								that.accordionDH = false;
								that.tiemDH = true;
								that.moreDH = true;
								that.RecommendDH = true;
								that.$refs.accordionF.style.animation = ".1s ease both accordionF";
								document.body.style.overflow = "hidden";
								document.querySelector("html").style.overflow = "hidden";
							})
					} else if(that.accordionDH == false) {
						$(".housenavitem").eq(item - 1).find("img").attr("src", "../assets/img/icon_drop_down.png")
						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionD";
						$(".list4rent .housenav-accordion").css("top", "1.9rem");
						document.body.style.overflow = "visible";
						document.querySelector("html").style.overflow = "visible";
					}
				}
				if(item == 2) {
					if(that.tiemDH == true) {
						that.accordionDH = true;
						that.tiemDH = false;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionF";
						document.body.style.overflow = "hidden";
						document.querySelector("html").style.overflow = "hidden";
					} else if(that.tiemDH == false) {
						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionD";
						$(".list4rent .housenav-accordion").css("top", "1.9rem");
						document.body.style.overflow = "visible";
						document.querySelector("html").style.overflow = "visible";
					}
				}
				//				更多筛选
				if(item == 3) {
					if(that.moreDH == true) {

						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = false;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionF";
						//							获取特色标签
						var ajaxSign = {
							"source": that.source, // string 是
							"houseType": '1', //  string 是
						};
						let ajaxData = api.getAES(ajaxSign);
						//				数据调用
						api.GetHouseTags(ajaxData)
							.then(res => {
								let ajaxdata = res.result;
								that.tagsData = ajaxdata;
								//							获取设施
								var AmenityajaxData = {
									"source": source, // string 是
									"houseType": '1', //  string 是
								};
								let AajaxData = api.getAES(AmenityajaxData);
								//				数据调用
								api.GetHouseAmenity(AajaxData)
									.then(res => {
										let ajaxdata = res.result;
										that.AmenityData = ajaxdata;
										document.body.style.overflow = "hidden";
										document.querySelector("html").style.overflow = "hidden";
									})

							})

					} else if(that.moreDH == false) {

						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionD";

						$(".list4rent .housenav-accordion").css("top", "1.9rem");
						document.body.style.overflow = "visible";
						document.querySelector("html").style.overflow = "visible";
					}

				}
				if(item == 4) {
					if(that.RecommendDH == true) {

						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = false;
						that.$refs.accordionF.style.animation = ".1s ease both accordionF";

						document.body.style.overflow = "hidden";
						document.querySelector("html").style.overflow = "hidden";
					} else if(that.RecommendDH == false) {

						that.accordionDH = true;
						that.tiemDH = true;
						that.moreDH = true;
						that.RecommendDH = true;
						that.$refs.accordionF.style.animation = ".1s ease both accordionD";

						$(".list4rent .housenav-accordion").css("top", "1.9rem");
						document.body.style.overflow = "visible";
						document.querySelector("html").style.overflow = "visible";
					}
				}
			},
			//			详情路由跳转
			detailsrouter(houseId) {
				var that = this;
				that.$router.push({
					path: '/longDetails',
					query: {
						houseId: houseId
					}
				})
			},
			//			整租跳转
			list_router(title) {
				var that = this;
				if(title == "品牌整租") {
					that.$router.push({
						path: '/longList',
						query: {
							house_type: '1',
							cityId: that.cityId
						}
					})
				}
				if(title == "品牌合租") {
					that.$router.push({
						path: '/longList',
						query: {
							house_type: '2',
							cityId: that.cityId
						}
					})
				}

				if(title == "全部房源") {
					that.$router.push({
						path: '/longList',
						query: {
							house_type: '0',
							cityId: that.cityId
						}
					})
				}

			},
			
			GOlonghouseMaster(houseMasterId) {
				var that = this;
				that.$router.push({
					path: '/longhouseMaster',
					query: {
						houseMasterId: houseMasterId,
						cityId: that.cityId
					}
				})
			},
			houseType(router_houseType) {
				var that = this;
				var ajaxSign = {
					"source": "web",
					"cityId": that.cityId,
					"houseType": router_houseType,
				};
				let ajaxData = api.getAES(ajaxSign);
				that.getColumnData(ajaxData);

			},
			//			列表查询

		}

		,
		components: {
			LongView
		}

	}
</script>
<style>
	/*引入图文theme4列表样式*/
	
	@import url("../assets/css/swiper.min.css");
	@import url("../assets/css/listfour.css");
	.list4rent .yd-accordion-head-arrow {
		margin-right: .01rem;
	}
	
	.list4rent .yd-accordion-head-arrow:after {
		content: "";
		width: .18rem;
		height: .18rem;
		border: 1px solid #a0a0a0;
		border-right: none;
		border-top: none;
		display: block;
		transition: transform .1s linear;
		transform: rotate(-45deg);
	}
	
	.list4rent .yd-accordion-head-arrow.yd-accordion-rotated:after {
		border-right: 1px solid #e34648;
		border-top: 1px solid #e34648;
		border-left: none;
		border-bottom: none;
		transform: rotate(-45deg);
	}
	
	.list4rent .list-box {
		display: flex;
		justify-content: space-between;
	}
	
	.list4rent .list-box span {
		display: block;
	}
	
	.list4rent .list-item {
		width: 50%;
		text-align: center;
	}
	
	.list4rent .listtags5-box {
		display: flex;
		-webkit-flex-wrap: wrap;
	}
	
	.list4rent .listtags5-item {
		width: 20%;
		text-align: center;
		padding: .24rem 0;
		box-sizing: border-box;
	}
	/*筛选样式*/
	
	.list4rent .amenityID {
		display: none;
	}
	
	.list4rent .housenav-accordion .yd-flexbox-item {
		font-size: .28rem;
		padding: .24rem;
		box-sizing: border-box;
		position: relative;
	}
	
	.list4rent .housenav-accordion .yd-flexbox-item::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #d9d9d9;
	}
	
	.list4rent .hntext {
		display: block;
		width: 1.3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.list4rent .addressAcc {
		overflow-y: auto;
		position: absolute;
		top: 1rem;
		left: 0;
		right: 0;
	}
	
	.list4rent .accordionDH-box {
		position: relative;
	}
	
	.list4rent .myaddress {
		position: absolute;
		width: 100%;
		padding: 0 .24rem;
		box-sizing: border-box;
		line-height: .9rem;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		background: #fff;
		font-size: .28rem;
		z-index: 99;
	}
	
	.list4rent .housenav-accordion {
		position: fixed;
		top: 2.15rem !important;
		bottom: 50rem !important;
		left: 0;
		right: 0;
		background: #FFFFFF;
		z-index: 99;
		box-sizing: border-box;
		overflow-y: auto;
	}
	
	@keyframes accordionF {
		from {
			bottom: 15rem;
			border-top: none;
		}
		to {
			bottom: 0;
			border-top: 1px solid rgba(0, 0, 0, 0.05);
		}
	}
	
	@keyframes accordionD {
		from {
			bottom: 0;
			border-top: 1px solid rgba(0, 0, 0, 0.05);
		}
		to {
			bottom: 15rem;
			border-top: none;
		}
	}
	/*入住时段*/
	
	.list4rent .housenavitem #checkinout {
		height: initial !important;
		line-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
	}
	
	.list4rent .housenavitem #startDate,
	.list4rent .housenavitem #endDate {
		width: 1.3rem;
		display: none;
	}
	
	.list4rent .housenavitem .mask_calendar {
		display: block;
		top: 3.1rem !important;
		background: none !important;
	}
	
	.list4rent .housenavitem .headerWrapper {
		display: none !important;
	}
	
	.list4rent .housenavitem .dateZone {
		margin-top: 0 !important;
	}
	
	.list4rent .housenavitem .tbody {
		margin-top: .9rem;
	}
	
	.list4rent .housenavitem .calendar {
		display: block !important;
		padding-bottom: 3rem;
		box-sizing: border-box;
	}
	/*更多推荐*/
	
	.list4rent .el-slider__bar {
		background-color: #EF4F4F !important;
	}
	
	.list4rent .el-slider__button {
		border-color: #EF4F4F;
		width: .48rem;
		height: .48rem;
	}
	
	.list4rent .moreDH {
		padding: 0 .24rem 1rem .24rem;
		box-sizing: border-box;
	}
	
	.list4rent .more-box {
		padding-bottom: .24rem;
		box-sizing: border-box;
	}
	
	.list4rent .moreDH-title {
		font-size: .31rem;
		padding: .2rem 0;
		box-sizing: border-box;
	}
	
	.list4rent .moreDH .mh-text {
		font-size: .24rem;
		color: rgb(239, 79, 79);
	}
	
	.list4rent .moreDH .my-el-slider {
		padding: 0 .24rem !important;
		box-sizing: border-box;
	}
	
	.list4rent .moreDH .yd-grids-3:before,
	.list4rent .moreDH .yd-grids-item:after,
	.list4rent .moreDH .yd-grids-3 .yd-grids-item:not(:nth-child(3n)):before,
	.list4rent .moreDH .yd-grids-2:before,
	.list4rent .moreDH .yd-grids-2 .yd-grids-item:not(:nth-child(2n)):before,
	.list4rent .moreDH .yd-flexbox-item::after,
	.list4rent .moreDH .yd-grids-5 .yd-grids-item:not(:nth-child(5n)):before,
	.list4rent .moreDH .yd-grids-5:before {
		display: none !important;
	}
	
	.list4rent .moreDH .hscl-icon {
		max-width: .54rem;
		height: .4rem;
		color: #282828;
		font-size: .175rem;
	}
	
	.list4rent .moreDH .hscl-icon-active {
		color: #E25051;
	}
	
	.list4rent .moreDH .yd-grids-4 {
		padding: 0 .35rem .35rem .35rem;
		box-sizing: border-box;
	}
	
	.list4rent .moreDH .hsc-list {
		font-size: .24rem;
		text-align: center;
		padding: .3rem 0;
	}
	
	.list4rent .moreDH .hsc-list p {
		margin-top: .2rem;
	}
	
	.list4rent .layout-item {
		display: inline-block;
		font-size: .28rem;
		text-align: center;
		padding: .1rem .2rem;
		box-sizing: border-box;
		border: 1px solid gainsboro;
		border-radius: 3px;
	}
	
	.list4rent .tags .layout-item {
		padding: .1rem .2rem;
		box-sizing: border-box;
		margin: .16rem;
	}
	
	.list4rent .layout-item-active {
		border-color: #E25051;
		color: #e25051;
	}
	
	.list4rent .more-item-active {
		border-color: #E25051;
		color: #e25051;
	}
	/*出租类型*/
	
	.list4rent .housetype-item span {
		text-align: center;
		display: block;
	}
	
	.list4rent .chuangwei {
		background: url(../assets/img/bed2.png) no-repeat center;
	}
	
	.list4rent .minsu {
		background: url(../assets/img/zhengzu.png) no-repeat center;
	}
	
	.list4rent .chuangwei,
	.list4rent .danjian,
	.list4rent .minsu {
		width: 1.04rem;
		height: 1.04rem;
		margin: auto;
		background-size: .6rem;
		border: 2px solid #424242;
		border-radius: 50%;
		margin-bottom: .16rem;
	}
	
	.list4rent .danjian {
		background: url(../assets/img/hezhu.png) no-repeat center;
		background-size: .5rem;
	}
	
	.list4rent .minsuactive {
		background: #E25051 url(../assets/img/zhengzu1.png) no-repeat center;
		background-size: .6rem;
		border-color: #E25051;
	}
	
	.list4rent .chuangweiactive {
		background: #E25051 url(../assets/img/bed1.png) no-repeat center;
		background-size: .6rem;
		border-color: #E25051;
	}
	
	.list4rent .danjianactive {
		background: #E25051 url(../assets/img/hezhu1.png) no-repeat center;
		background-size: .5rem;
		border-color: #E25051;
	}
	/*底部按钮*/
	
	.list4rent .moreDH-bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #eeeeee;
		box-sizing: border-box;
		padding: .24rem 0;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
		background: white;
	}
	
	.list4rent .mb-btn {
		display: block;
		width: 1.77rem;
		line-height: .69rem;
		background: #e25051;
		color: #fff;
		border-radius: 5px;
		margin: 0 0.2rem;
	}
	
	.list4rent .mb-btn1 {
		float: right;
		background: #c4c4c4;
	}
	/*排序*/
	
	.list4rent .RecommendDH-item {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		font-size: .28rem;
		padding: .24rem;
		border-bottom: 1px solid #eeeeee;
		box-sizing: border-box;
	}
	
	.list4rent .RecommendDH-item-active {
		color: #e25051;
	}
	
	.list4rent .RecommendDH-item .yd-icon-checkoff {
		font-size: .28rem !important;
	}
	/*<!--网页头部-->*/
	
	.list4rent .index-top {
		width: 100%;
		padding: .12rem .34rem;
		box-sizing: border-box;
		background: #fff;
		display: -webkit-flex;
		justify-content: space-between;
	}
	
	.list4rent .index-topon {
		width: .55rem;
		height: .96rem;
	}
	
	.list4rent .index-toptw {
		width: .96rem;
		height: .96rem;
	}
	
	.list4rent .index-topth {
		width: .74rem;
		height: .96rem;
	}
	/*banner*/
	
	.list4rent .banner img {
		width: 100%;
		max-height: 5rem;
	}
	
	.list4rent .yd-slider-pagination {
		display: none !important;
	}
	/*分类*/
	
	.list4rent .classification {
		width: 100%;
		background: #FFFFFF;
	}
	
	.list4rent .classification ul {
		width: 100%;
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		padding-bottom: .3rem;
		box-sizing: border-box;
	}
	
	.list4rent .List-img>.yd-list-img {}
	
	.list4rent .classification li {
		width: 33.33333%;
		text-align: center;
		padding-top: .3rem;
		box-sizing: border-box;
	}
	
	.list4rent .icon-img {
		display: block;
		margin: auto;
		width: .87rem;
		margin-bottom: .17rem;
	}
	
	.list4rent .classification li span {
		display: block;
		font-size: .31rem;
	}
	/*房屋列表*/
	
	.list4rent .houselist {
		width: 100%;
		padding-top: .07rem;
		box-sizing: border-box;
	}
	
	.list4rent .housenav {
		width: 100%;
		display: -webkit-flex;
		display: flex;
		padding: .21rem 0;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 1px;
	}
	
	.list4rent .housenavitem {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		font-size: .28rem;
	}
	
	.list4rent .housenavitem img {
		height: .12rem;
		margin-left: .1rem;
	}
	
	.list4rent .yd-list-loading>div {
		display: block !important;
	}
</style>